<template>
    <div>
        <div class="vs-table-box">
            <el-form v-loading="loading" ref="ruleForm" label-position="right" class="orm-info" label-width="140px"
                :model="ruleForm" inline>
                <h3>基本信息</h3>
                <el-form-item label="商品标题：" prop="title" class="vs-form-item-100">
                    <el-input v-model="ruleForm.title" readonly placeholder="" clearable></el-input>
                </el-form-item>
                <el-form-item label="标准成品类型：" prop="sex_type">
                    <el-select style="width: 200px" v-model="ruleForm.sex_type" disabled @change="styleChange"
                        placeholder="请选择">
                        <el-option label="男款" :value="353"> </el-option>
                        <el-option label="女款" :value="354"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品编码：" prop="number">
                    <el-input v-model="ruleForm.number" readonly style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="款号：" prop="item">
                    <el-select style="width: 200px" clearable @change="getGoodsByParams" disabled
                        v-model="ruleForm.item" placeholder="请选择">
                        <el-option v-for="item in itemList" :key="item.id" :label="item.title"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="毛坯种类：" prop="roughcast">
                    <el-select style="width: 200px" @change="getGoodsByParams" disabled clearable
                        v-model="ruleForm.roughcast" placeholder="请选择">
                        <el-option v-for="item in roughcastList" :key="item.id" :label="item.title"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="颜色：" prop="colour">
                    <el-select style="width: 200px" @change="getGoodsByParams(2)" filterable v-model="ruleForm.colour"
                        placeholder="请选择">
                        <el-option v-for="item in colourList" :key="item.id" :label="item.title"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="尺寸：" prop="size">
                    <el-select style="width: 200px" @change="getGoodsByParams" filterable v-model="ruleForm.size"
                        placeholder="请选择">
                        <el-option v-for="item in sizeList" :key="item.id" :label="item.title"
                            :disabled="!goodsList.some(v => v.colourInfo.id == ruleForm.colour && item.id == v.sizeInfo.id)"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="批发价：" prop="trade_price">
                    <el-input v-model="ruleForm.trade_price" readonly style="width: 200px" placeholder="请输入价格" clearable></el-input>
                </el-form-item> -->
                <el-form-item label="零售价：" prop="sale_price">
                    <el-input v-model="ruleForm.sale_price" readonly style="width: 200px" placeholder="请输入价格"
                        clearable></el-input>
                </el-form-item>
                <el-form-item class="vs-form-item-100" label="商品图片：">
                    <vs-uploading v-model="ruleForm.images" width="225px" height="300px" readonly></vs-uploading>
                </el-form-item>
                <el-form-item label="商品说明介绍：" class="vs-form-item-100">
                    <el-input v-model="ruleForm.details" type="textarea" :rows="4" readonly></el-input>
                </el-form-item>
                <el-form-item label="要货数量：" class="vs-form-item-100">
                    <el-input-number v-model="ruleForm.quantity" :step="1" :min="1" :max="9999"
                        step-strictly></el-input-number>
                </el-form-item>
                <el-form-item label="备注：" class="vs-form-item-100">
                    <el-input v-model="remarks" type="textarea" :rows="4"></el-input>
                </el-form-item>
            </el-form>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
                <el-button type="primary" :loading="isBtn" @click="submitForPurchase">提交要货</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import VsUploading from '@/components/VsUploading.vue';
export default {
    components: { VsUploading },
    data() {
        return {
            categoryList: [],
            loading: false,
            type: 1,//1详情  2新增标准成品要货单
            isBtn: false,
            goodsList: [],
            ruleForm: {
                type: '6',//标准成品
                number: '',
                series: '',
                title: '',
                roughcast: '',
                needle: '',
                size: '',
                length: '',
                sex: '',
                sex_type: '',
                colour: '',
                item: '',
                hairstyle: '',
                sku_text: '',
                unit: '',
                warehouse_id: '',
                warehouse_location_id: '',
                market_price: '',
                trade_price: '',
                sale_price: '',
                images: [],
                details: '',
                quantity: 1,
                roughcast_type: '1',
                goods_carousel: [],
            },
            rules: {
                type: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
                number: [{ required: true, message: '请输入商品编码', trigger: 'blur' }],
                roughcast_type: [{ required: true, message: '请选择二级商品类型', trigger: 'change' }],
                series: [{ required: true, message: '请选择商品系列', trigger: 'change' }],
                title: [{ required: true, message: '请输入商品系列', trigger: 'blur' }],
                roughcast: [{ required: true, message: '请选择毛坯种类', trigger: 'change' }],
                sex_type: [{ required: true, message: '请选择标准成品类型', trigger: 'change' }],
                needle: [{ required: true, message: '请选择递针类型', trigger: 'change' }],
                size: [{ required: true, message: '请选择尺寸', trigger: 'change' }],
                length: [{ required: true, message: '请选择长度', trigger: 'change' }],
                roughcast: [{ required: true, message: '请选择毛坯种类', trigger: 'change' }],
                sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
                colour: [{ required: true, message: '请选择颜色', trigger: 'change' }],
                item: [{ required: true, message: '请选择款号', trigger: 'change' }],
                hairstyle: [{ required: true, message: '请选择发型', trigger: 'change' }],
                sku_text: [{ required: true, message: '请输入规格', trigger: 'blur' }],
                unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
                warehouse_id: [{ required: true, message: '请选择仓库', trigger: 'change' }],
                market_price: [{ required: true, message: '请输入采购价', trigger: 'blur' }],
                trade_price: [{ required: true, message: '请输入批发价', trigger: 'blur' }],
                sale_price: [{ required: true, message: '请输入零售价', trigger: 'blur' }],
                images: [{ required: true, message: '请选择商品图片', trigger: 'blur' }],
                details: [{ required: true, message: '请输入商品说明介绍', trigger: 'blur' }],
            },
            keys: {
                colourInfo: 'colourList',
                itemInfo: "itemList",
                roughcastInfo: "roughcastList",
                sizeInfo: "sizeList",
            },
            remarks: "",
            roughcastList: [], //毛坯种类列表
            needleList: [], //递针类型列表
            sizeList: [], //尺寸列表
            colourList: [], //颜色列表
            itemList: [], //款号列表
        };
    },
    computed: {
        isReadOnly() {
            return this.type == 1
        }
    },
    async created() {
        let { id, type = 1, shopType } = this.$route.query;
        this.type = type;
        if (id) {
            await this.getGoods(id);
        }
        if (!this.ruleForm.sex_type) this.ruleForm.sex_type = 353;
    },
    methods: {
        getListValue(list, id) {
            return list.find(v => v.id == id)?.title
        },
        async submitForPurchase() {//提交要货
            if (!this.ruleForm.id) {
                this.$message.error("请选择要要货的标准成品!")
                return
            }
            let obj = Object.assign({}, this.ruleForm)
            let goods = [{
                goods_id: obj.id,
                goods_number: obj.number,
                blank_type_id: obj.roughcast,
                blank_type_name: this.getListValue(this.roughcastList, obj.roughcast),
                // needle_type_id:"1",
                // needle_type_name:"1",
                // length_id:"1",
                // length_name:"1",
                // sex_id:"1",
                // sex_name:"1",
                size_id: obj.size,
                size_name: this.getListValue(this.sizeList, obj.size),
                colour_id: obj.colour,
                colour_name: this.getListValue(this.colourList, obj.colour),
                quantity: obj.quantity,
                price: obj.sale_price,
            }];
            this.isBtn = true;
            let { code } = await this.$Http.ordinarySave({
                type: 2,
                remarks: this.remarks,
                goods: JSON.stringify(goods)
            })
            this.isBtn = false;
            if (code) {
                this.$message.success("提交要货单成功!");
                this.$router.go(-1)
            }
        },
        async getGoodsByParams(type) {
            let { item, roughcast, colour, size } = this.ruleForm;
            console.log(item, roughcast, colour, size);
            if (item && roughcast && colour && size) {
                if (type == 2) {
                    size = this.goodsList.find(v => v.colourInfo.id == colour)?.size ?? size;
                }
                let { code, data } = await this.$Http.getGoodsByParams({
                    item, roughcast, colour, size
                })
                if (code && data?.id) {
                    data.images = data.images ? data.images.split(",") : []
                    data.goods_carousel = data.goods_carousel ? data.goods_carousel.split(",") : [];
                    data.quantity = 1;
                    this.ruleForm = data;
                } else this.$message.error("未查询到相关的标准成品!")
            } else this.resetRow();

        },
        resetRow() {
            this.ruleForm.title = "";
            this.ruleForm.number = "";
            this.ruleForm.trade_price = "";
            this.ruleForm.sale_price = "";
            this.ruleForm.images = "";
            this.ruleForm.id = "";
            this.ruleForm.goods_carousel = "";
            this.ruleForm.details = "";
        },
        async styleChange() {//重置类型选择
            this.ruleForm.size = '';
            this.ruleForm.colour = '';
            this.ruleForm.roughcast = '';
            this.ruleForm.item = '';
            if (!this.isReadOnly) this.resetRow();
        },
        async getGoods(id) {//标准成品详情
            this.loading = true;
            let { code, data } = await this.$Http.getGoods({ id: id, type: 6, is_group: 1 });
            this.loading = false;
            if (code) {
                data.forEach(v => {
                    for (let key in this.keys) {
                        if (this[this.keys[key]].every(v2 => v2.id != v[key].id)) {
                            this[this.keys[key]].push(v[key])
                        }
                    }
                })
                this.goodsList = data;
                let { series, number, title, roughcast, needle, size, length, sex, colour, item, hairstyle, sku_text, unit, warehouse_id, warehouse_location_id, market_price, trade_price, sale_price, images, details, id, roughcast_type, sex_type } = data[0];
                this.ruleForm = { series, number, title, roughcast, needle, size, length, sex, colour, item, hairstyle, sku_text, unit, warehouse_id, warehouse_location_id, market_price, trade_price, sale_price, images, details, id, roughcast_type, sex_type, quantity: 1 };
                if (this.ruleForm.warehouse_location_id == 0) {
                    this.ruleForm.warehouse_location_id = '';
                }
                if (data[0].type == 2 && data[0].roughcast_type == 1) {
                    this.ruleForm.type = '6';
                } else {
                    this.ruleForm.type = data[0].type + '';
                }
                this.ruleForm.roughcast_type = data[0].roughcast_type + '';
                this.ruleForm.warehouse_id = data[0].warehouse_id || '';
                let imgs = [];
                let imgs1 = [];
                if (data[0].images) imgs = data[0].images.split(',');
                if (data[0].goods_carousel) imgs1 = data[0].goods_carousel.split(',');
                this.ruleForm.images = [];
                this.ruleForm.goods_carousel = [];
                for (let i in imgs) {
                    this.ruleForm.images.push(imgs[i]);
                }
                for (let i in imgs1) {
                    this.ruleForm.goods_carousel.push(imgs1[i]);
                }
            }
        },
        async getGoodsCategoryCheng(val, flag) {//获取标准成品类型
            if (flag) {
                this.itemList = this.colourList = this.roughcastList = this.sizeList = [];
                this.ruleForm.item = this.ruleForm.colour = this.ruleForm.roughcast = this.ruleForm.size = '';
            }
            let { code, data } = await this.$Http.getGoodsCategoryCheng({ sex_type: this.ruleForm.sex_type });
            if (code) {
                this.itemList = data.item;
                this.colourList = data.colour;
                this.roughcastList = data.roughcast;
                this.sizeList = data.size;
            }
        },
        subitm() {
            let obj = Object.assign({}, this.ruleForm);
            let arr = [];
            let arr1 = [];
            for (let i in this.ruleForm.images) {
                arr.push(this.ruleForm.images[i]);
            }
            for (let i in this.ruleForm.goods_carousel) {
                arr1.push(this.ruleForm.goods_carousel[i]);
            }
            if (obj.type == 6) {
                obj.roughcast_type == 1;
            }
            obj.images = arr.join(',');
            obj.goods_carousel = arr1.join(',');
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                this.isBtn = true;
                console.log(JSON.stringify(obj));
                let { code, data } = await this.$Http.setGoods(obj);
                this.isBtn = false;
                if (code) {
                    this.utils.backPage();
                    this.$message.success(obj.id ? '修改成功!' : '添加成功!');
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>

</style>
